<template>
	<view class="container">
		<view class="box">
      <view class="navbar">
        <view v-for="(item, index) in tabList" :key="index" class="nav-item"
              :class="{current: tabIndex === index}" @click="navClick(index)">
          {{item.text}}
        </view>
      </view>

			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input :adjust-position="false" type="text" placeholder="请输入" confirm-type="search"
						v-model="kwd"></input>
					<button class="cu-btn search-btn shadow-blur round" @click="onSearch">搜索</button>

				</view>
<!--				<view class="cu-btn cate-btn shadow-blur round" v-if="tabCurrentIndex<1">-->
<!--					<picker @change="statusChange" :value="statusIndex" :range="status">-->
<!--						<view class="picker">-->
<!--							{{statusIndex>-1?'∨'+status[statusIndex]:'∨全部状态'}}-->
<!--						</view>-->

<!--					</picker>-->
<!--				</view>-->
			</view>

      <view class="navbar" v-if="tabIndex==0">
        <view v-for="(item, index) in navList" :key="index" class="nav-item"
              :class="{current: tabCurrentIndex === index}" @click="tabClick(index)">
          {{item.text}}
        </view>
      </view>
		</view>
		<scroll-view style="margin-top: 80px" class="list-scroll-content" scroll-y @scrolltolower="loadData" v-if="tabIndex==0">
			<!-- 空白页 -->
			<empty v-if="loaded === true && worksList.length === 0"></empty>

			<!-- 招聘列表 -->
			<view v-for="(item,index) in worksList" :key="index"
				class="item padding-xl boxbox bg-grey123 radius shadow shadow-lg bg-white margin-top">
				<view class="flex">
					<view class="title flex-treble padding-top-sm text-cut  radius">{{item.seeker.name+' '+item.seeker.mobile}}</view>
          <view class="flex-sub" style="font-size:20px;line-height: 30px;text-align:right;">
<!--            <uni-tooltip :content="'引荐人电话:'+item.seeker.input_id" >-->
<!--            <span class=" cuIcon-info" @tap="showInfo(item.seeker.input_id)"></span>-->
<!--            </uni-tooltip>-->
            <span v-if="item.seeker.input_id>''" class=" cuIcon-info" @tap="showInfo(item.seeker.input_id)"></span>
          </view>

              <view class="flex-sub flex" style="font-size:20px;text-align: end;line-height: 30px">

                <span class="flex-sub cuIcon-phone" @click="callTel(item.seeker.mobile)"></span>
                <span v-if="item.seeker.path>''"  class="flex-sub cuIcon-form" @click="showImgs([item.seeker.path],0)"></span>
              </view>
<!--					<view class=" reward   radius text-blue" v-if="item.apply_status=='wait'">待沟通</view>-->
<!--					<view class=" reward   radius text-blue" v-if="item.apply_status=='again'">再沟通</view>-->
<!--					<view class=" reward   radius text-red" v-if="item.apply_status=='stop'">不考虑</view>-->
<!--					<view class=" reward   radius text-blue"-->
<!--						v-if="item.interview_status=='wait'&&item.apply_status=='success'">待面试</view>-->
<!--					<view class=" reward   radius text-red" v-if="item.interview_status=='fail'">未通过</view>-->
<!--					<view class=" reward   radius text-green" v-if="item.interview_status=='success'&&item.stable_status=='join'">待入职-->
<!--					</view>-->
<!--					&lt;!&ndash; <view class=" reward  margin-xs radius text-green" v-if="item.interview_status=='join'">已入职</view> &ndash;&gt;-->
<!--					<view class=" reward   radius text-red" v-if="item.item.stable_status=='nojoin'">放弃入职</view>-->
<!--					<view class=" reward   radius text-blue" v-if="item.stable_status=='wait'">待稳岗</view>-->
<!--					<view class=" reward   radius text-green" v-if="item.stable_status=='success'">已稳岗</view>-->
<!--					<view class=" reward   radius text-red" v-if="item.stable_status=='fail'">未稳岗</view>-->
				</view>
				<view class="flex  p-xs mb-sm123  margin-bottom-sm mb-sm">
					<view class="flex-twice  margin-xs123  padding-tb-sm margin-xs radius detail">
<!--						<view>{{item.area_name}} |{{typeState.work[item.job.work_type]}}-->
<!--							|{{typeState.edu[item.job.edu]}} |-->
<!--							{{item.job.age_small+'岁-'+item.job.age_big+'岁'}} | {{typeState.exp[item.job.exp]}} |-->
<!--							{{typeState.hour[item.job.hour]}} |-->
<!--							{{item.job.time>''?typeState.time[item.job.time]+'|':''}}{{item.job.rest>''?typeState.rest[item.job.rest]+'|':''}}-->
<!--							{{item.job.board!='F'?typeState.board[item.job.board]+'|':''}}{{item.job.social!='F'?typeState.social[item.job.social]+'|':''}}-->
<!--							推荐佣金|稳岗奖金-->
<!--						</view>-->
            <view>{{typeState.wx_name[item.job.wx_name]}}|{{typeState.work[item.job.work_type]}}|{{typeState.exp[item.job.exp]}}|{{item.job.time}}|
              {{typeState.board[item.job.board]}}|{{item.job.age_small+'岁-'+item.job.age_big+'岁'}}|
              {{typeState.edu[item.job.edu]}}|{{item.job.rest}} |{{typeState.social[item.job.social]}}|{{typeState.contract[item.job.reward]}}{{item.job.hour>''?('|'+item.job.hour):''}}
            </view>
					</view>
				</view>
				<view class="flex  p-xs margin-bottom-sm mb-sm"  @tap="edit(item)">
					<!-- <view class="flex-sub  padding-sm margin-xs radius">{{item.address}}</view> -->
					<view class="flex-2 company radius text-cut">应聘岗位：{{item.job.position}}</view>
					<!-- <view class="flex-sub  padding-sm margin-xs radius" @click="goPage('/pages/tabbar/tabbar-2/jobInfo')"> -->
					<view class="flex-sub    radius"  style="text-align:center;margin: auto;">
<!--            <span class="cuIcon-edit"></span>-->
            <view class="round text-green  " v-if="item.apply_status=='join'">已录用<span class="cuIcon-edit"></span></view>
            <view class=" round text-orange   " v-else-if="item.apply_status=='success'">应聘中<span class="cuIcon-edit"></span></view>
            <view class=" round text-blue  " v-else-if="item.apply_status=='again'">有意向<span class="cuIcon-edit"></span></view>
            <view class=" round  text-grey " v-else-if="item.apply_status=='giveup'">已放弃<span class="cuIcon-edit"></span></view>
            <view class=" round  text-red " v-else-if="item.apply_status=='stop'">不满足<span class="cuIcon-edit"></span></view>
						<view class=" round text-blue  " v-else> 待处理<span class="cuIcon-edit"></span></view>
					</view>
				</view>

			</view>

			<uni-load-more :status="loadingType"></uni-load-more>

		</scroll-view>
		<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData" v-else>
			<!-- 空白页 -->
			<empty v-if="loaded === true && worksList.length === 0"></empty>

      <!-- 招聘列表 -->
      <view v-for="(item,index) in worksList" :key="index"
            class="item padding-xl boxbox bg-grey123 radius shadow shadow-lg bg-white margin-top">
        <view class="flex mb-sm123 ">
          <view class="title flex-treble padding-top-sm text-cut  radius">{{item.name+' '+item.mobile}}</view>
          <view class="flex-sub flex" style="font-size:20px;text-align: end;line-height: 30px">
            <span v-if="item.input_id>''" class=" cuIcon-info" @tap="showInfo(item.input_id)"></span>
            <span class="flex-sub cuIcon-phone margin-lr" @click="callTel(item.mobile)"></span>
            <span v-if="item.path>''" class="flex-sub cuIcon-form" @click="showImgs([item.path],0)"></span>
          </view>
        </view>
        <view class="flex  p-xs  margin-bottom-sm mb-sm" @tap="need(item)">
          <view class="flex-twice   padding-tb-sm margin-xs ">
            <view class="text-cut">期望岗位类型：{{item.position_name}}</view>
            <view class="text-cut">毕业年份：{{item.year}}</view>
          </view>
          <view class="flex-sub padding-tb-sm margin-xs " style="text-align:center;margin: auto;">

            <view class="round text-green  " v-if="item.status=='join'">已录用<span class="cuIcon-edit"></span></view>
            <view class=" round text-orange   " v-else-if="item.status=='success'">应聘中<span class="cuIcon-edit"></span></view>
            <view class=" round text-blue  " v-else-if="item.status=='again'">有意向<span class="cuIcon-edit"></span></view>
            <view class=" round  text-grey " v-else-if="item.status=='giveup'">已放弃<span class="cuIcon-edit"></span></view>
            <view class=" round  text-red " v-else-if="item.status=='stop'">不满足<span class="cuIcon-edit"></span></view>
            <view class=" round text-blue  " v-else> 待处理<span class="cuIcon-edit"></span></view>
          </view>
        </view>
      </view>

        <uni-load-more :status="loadingType"></uni-load-more>

		</scroll-view>
		<!-- 绑定 -->
<!--		<goReg ref="goReg" :contentHeight="580" @eventBind="Bind($event)"></goReg>-->
    <view class="cu-modal" :class="modalName=='editModal'?'show':''" @tap="hideModal">
      <view class="cu-dialog" @tap.stop>

        <view class="cu-list menu text-left solid-top" style="margin: 0;">
          <view class="cu-item">
            <view class="content">
              <view class="text-blue" style="justify-content: center;">求职处理</view>
            </view>
          </view>
          <view class="cu-item">
            <view class="content">
              <view class="text-black">求职人：</view>
            </view>
            <view class="action"><text class="text-black text-sm">{{editData.seeker.name+' '+editData.seeker.mobile}}</text></view>
          </view>
<!--          <view class="cu-item">-->
<!--            <view class="content">-->
<!--              <view class="text-black">应聘人：</view>-->
<!--            </view>-->
<!--            <view class="action"><text class="text-black text-sm">年</text></view>-->
<!--          </view>-->
          <view class="cu-item ">
            <view class="content">
              <text class="text-black">求职岗位：</text>
            </view>
            <view class="action"><text class="text-black text-sm">{{editData.job.position}}</text></view>
          </view>
          <view class="cu-item ">
            <view class="content">
              <text class="text-black">沟通记录:</text>
            </view>
            <view class="action">
              <picker mode = selector :value="statusIndex" :range="statusArr" @change="changeStatus">
                <view class="picker">{{statusArr[statusIndex]}}</view>
              </picker>
            </view>
          </view>

          <view class="cu-item " >
            <view class="content">
              <view class="cu-btn bg-blue round recount" style="margin: 0 15%;width: 70%;" @click="doEdit(editData.id)">确认提交</view>
            </view>
          </view>
        </view>
      </view>
    </view>


    <view class="cu-modal" :class="modalName=='needModal'?'show':''" @tap="hideModal">
      <view class="cu-dialog" @tap.stop>

        <view class="cu-list menu text-left solid-top" style="margin: 0;">
          <view class="cu-item">
            <view class="content">
              <view class="text-blue" style="justify-content: center;">岗位需求</view>
            </view>
          </view>
          <view class="cu-item">
            <view class="content">
              <view class="text-black">需求人：</view>
            </view>
            <view class="action"><text class="text-black text-sm">{{needData.name+' '+needData.mobile}}</text></view>
          </view>
          <!--          <view class="cu-item">-->
          <!--            <view class="content">-->
          <!--              <view class="text-black">应聘人：</view>-->
          <!--            </view>-->
          <!--            <view class="action"><text class="text-black text-sm">年</text></view>-->
          <!--          </view>-->
          <view class="cu-item ">
            <view class="content">
              <text class="text-black">需求岗位：</text>
            </view>
            <view class="action"><text class="text-black text-sm">{{needData.position_name}}</text></view>
          </view>
          <view class="cu-item ">
            <view class="content">
              <text class="text-black">沟通记录:</text>
            </view>
            <view class="action">
              <picker mode = selector :value="statusIndex" :range="statusArr" @change="changeStatus">
                <view class="picker">{{statusArr[statusIndex]}}</view>
              </picker>
            </view>
          </view>

          <view class="cu-item " >
            <view class="content">
              <view class="cu-btn bg-blue round recount" style="margin: 0 15%;width: 70%;" @click="doNeed(needData.id)">确认提交</view>
            </view>
          </view>
        </view>
      </view>
    </view>
	</view>



</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	import {
		mapState
	} from 'vuex';
  import UniTooltip from "../../../uni_modules/uni-tooltip/components/uni-tooltip/uni-tooltip";
	export default {
		components: {
      UniTooltip,
			uniLoadMore,
			empty
		},
		data() {
			return {
				tabCurrentIndex: 0,
        tabIndex: 0,
        tabList:[{
          state: 0,
          text: '求职处理',
          value: 1,
          loadingType: 'more',
          cateList: []
        },
        {
          state: 1,
          text: '岗位需求',
          value: 2,
          loadingType: 'more',
          cateList: []
        }],
				navList: [{
						state: 0,
						text: '待处理',
						value: 1,
						loadingType: 'more',
						cateList: []
					},
					{
						state: 1,
						text: '已处理',
						value: 2,
						loadingType: 'more',
						cateList: []
					}
				],
				statusIndex: 0,
        statusArr: ['请选择处理意见', '有意向', '不满足', '应聘中', '已放弃', '已录用'],
        // statusArr: ['是','否'],

				statusIds: ['', 'again', 'stop', 'success', 'giveup', 'join',],
				// wait待沟通 again再沟通 stop不考虑 success待面试 面试状态：wait待面试 giveup放弃面试 fail未通过 success已通过 join已入职 nojoin放弃入职join未入职 wait待稳岗 success已稳岗 fail未稳岗
				tabed: false,
				loaded: false,
				isMP: false,
				loadingType: 'more',
				userState: 1,
				titleNViewBackground: '#FFF',
				area_id: '',
				wage_big: '',
				kwd: '',
				page: 1,
				wage_small: '',
				position_type: '',
				work_type: '',
				statusType: '',
        editData: [],
        needData: [],
        modalName: '',
				typeState: {},
				firstPage: '',
				worksList: [],
        userInfo: []
			};
		},
		computed: {
			// ...mapState(['hasLogin','userInfo'])
		},
		onLoad() {
			this.loaded = true;
      this.userInfo = uni.getStorageSync('userInfo');
      this.getTableState();
			console.log('onload')
		},
		onShow() {
			let t = this;
			this.worksList = [];
			this.page = 1;
			this.loadData();
		},
		methods: {
		  hideModal(){
        this.modalName = ''
      },
      async doEdit(id){
        let t = this;
        if(t.statusIndex==0){
          uni.showToast({
            title:'请选择处理意见',
            icon:'none',
          })
          return
        }
        let param = {
          'id':id,
          'handle_mobile':t.userInfo.mobile,
          'status':t.statusIds[t.statusIndex],
        };

        let data = await this.$http.post(
          'wx/apply_update', //可以直接放链接(将不启用全局定义域名)
          param,
        );

        t.hideModal()
        t.onSearch()
      },
      async doNeed(id){
        let t = this;
        if(t.statusIndex==0){
          uni.showToast({
            title:'请选择处理意见',
            icon:'none',
          })
          return
        }
        let param = {
          id:id,
          status:t.statusIds[t.statusIndex],
        };

        let data = await this.$http.post(
          'wx/update_user', //可以直接放链接(将不启用全局定义域名)
          param,
        );
        uni.showToast({
          title: `操作成功`,
          icon: 'none'
        })

        t.hideModal()
        t.onSearch()
      },
      changeStatus(e){
        this.statusIndex = e.detail.value
      },
      edit(item){
        console.info("🚀 ~ file:joinList method:edit line:306 -----", item)
        this.statusIndex = 0
        this.editData = item
        this.modalName = 'editModal'
      },
      need(item){
        this.statusIndex = 0
        this.needData = item
        this.modalName = 'needModal'
      },
      //查看图片
      showImgs(urls,index){
        if(urls!=undefined){
          uni.previewImage({
            current: urls[index], // 当前显示图片的http链接
            urls: urls // 需要预览的图片http链接列表
          })
        }
      },
      //预览pdf
      goPreview(item) {

        let t = this
        let url = item.path
        if(item==undefined||item==''||url==''){
          uni.showToast({
            title:'简历附件数据错误',
            icon:'none'
          })
          return
        }
        // let url = this.$IMG_URL+'files/'+path
        // let url = item.pdf_path
        console.info("🚀 ~ file:tabbar-1 method:goPreview line:305 -----", url)
        // if(path=='') return
        uni.showLoading({
          title: '下载文档中...',
          mask: true
        });
        // if(path=='') return
        uni.downloadFile({
          // 示例 url，并非真实存在
          // url: 'http://zzb.aottov.com/uploads/test.pdf',
          url: url,
          success: function (res) {
            console.log(res)
            const filePath = res.tempFilePath
            uni.openDocument({
              filePath: filePath,
              // showMenu: false, // 是否显示右上角菜单
              // fileType: 'pdf',
              success: function (res) {
                console.log('打开文档成功')
                uni.showToast({
                  title: '打开文档成功！',
                  icon: 'none'
                });
              }
              ,fail(e){
                console.log(e)
                uni.showToast({
                  title: '打开文档失败！',
                  icon: 'none'
                });
              }
            })
          },fail(e){
            console.log(e)
            uni.showToast({
              title: '文档下载失败！',
              icon: 'none'
            });
          }
        })
      },
      callTel(phone){
        uni.makePhoneCall({
          phoneNumber:  phone
        });
      },
      showInfo(phone){
        uni.showToast({
          title:'引荐人电话：'+phone,
          icon:'none'
        })
      },
			Bind() {
				console.log('in Bind')
				this.onSearch();
			},
			async getTableState() {
				let param = 'jobs';
				let t = this;
				let data = await this.$http.get(
					'wx/common_get_table_status/' + param, //可以直接放链接(将不启用全局定义域名)
				);
				// t.provinceData=[''];
				// t.citysData = ['请选择']var arr = []
				t.typeState = data
				uni.setStorageSync('jobState', data);
				let obj = data.type

				console.log(data);
			},
			onSearch() {
				this.page = 1;
				this.worksList = []
				this.loadData();
			},
			statusChange(e) {
				let i = e.detail.value
				this.statusType = this.statusArr[i]
				this.page = 1;
				this.statusIndex = i;
				this.worksList = [];
				this.loadData();
			},
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadData() {
				let t = this

				t.loadingType = 'loading';

				// let uId = uni.getStorageSync('userId');
				// console.log(uId)
				// let uId =1;
				let uId = uni.getStorageSync('userId');
				if (uId > "0" && uId != undefined) {
					if (t.tabIndex == 1) {

            let search = {
              order_by: 'created_at,desc',
              // seeker_id: uId,
              agent_mobile: t.userInfo.mobile,
              title: t.kwd,
              wx_name:this.$wx_name,
            }


            console.log(JSON.stringify(search))
            let param = {
              search_data: JSON.stringify(search),
              page: t.page,
              per_page: 10,
            };
            let data = await this.$http.get(
              'wx/all_list', //可以直接放链接(将不启用全局定义域名)
              param,
            );
            // this.worksList = data
            if (data != undefined && data.length > 0) {
              this.worksList = this.worksList.concat(data)
              this.page++
            }

            console.log(this.worksList)
            //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
            this.loaded = true;

            //判断是否还有数据， 有改为 more， 没有改为noMore
            this.loadingType = 'more';
            return
					}
					let search = {
						order_by: 'created_at,desc',
						// seeker_id: uId,
            agent_mobile: t.userInfo.mobile,
						title: t.kwd,
						wx_name:this.$wx_name,
            handle: 1,
					}
					if(t.typeId>1){
            search.handle=2
          }
					console.log(JSON.stringify(search))
					let param = {
						search_data: JSON.stringify(search),
						page: t.page,
						per_page: 5,
					};
					let data = await this.$http.get(
						'wx/applied', //可以直接放链接(将不启用全局定义域名)
						param,
					);
					// this.worksList = data
					if (data != undefined && data.length > 0) {
						this.worksList = this.worksList.concat(data)
						this.page++
					}

					console.log(this.worksList)
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.loaded = true;

					//判断是否还有数据， 有改为 more， 没有改为noMore
					this.loadingType = 'more';
					return
				}

				t.$refs.goReg.showModal('regModal');
				return;




			},
			//推荐人才
			pushPerson() {
				this.$refs.pushPerson.toggleMask();
			},
			//推荐人才
			pushPosition() {
				this.$refs.pushPosition.toggleMask();
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/tabbar/tabbar-2/jobInfo?id=${id}`
					// url: `/pages/tabbar/tabbar-1/trainInfo`
				})
			},

			//详情页
			navToDetailPage(item) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				// uni.showToast({
				// 	title: `功能开发中...`,
				// 	icon: 'none'
				// })
				// return
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					url: `/pages/works/detail?id=${id}`
				})
			},
			personDetailPage(item) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				let id = item.title;
				uni.navigateTo({
					url: `/pages/person/detail?id=${id}`
				})
			},
			//顶部tab点击
      navClick(index) {

				this.tabIndex = index;
				console.log(index)

				this.page = 1;
				this.worksList = [];
				this.loadData('refush');
			},
      tabClick(index) {
				// if(index){
				// 	uni.showToast({
				// 		title: `功能开发中...`,
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.tabCurrentIndex = index;
				console.log(index)

				this.typeId = this.navList[index].value;

				this.page = 1;
				this.worksList = [];
				this.loadData('refush');
			},
			cateChange(e) {
				let index = e.detail.value
				this.cateIndex = index;
				let cateId = this.cateIds[index];

				console.log(cateId)
				this.cateId = cateId > 0 ? cateId : 0;
				this.page = 1;
				this.tableList = [];
				this.loadData('refush');
			},
			//更换tabbar
			changeTabbar(state) {
				let tabList = Json.tabList;
				uni.setStorageSync('userState', state);

				let tabBar = tabList[state];
				console.log(tabBar)
				let index = 0;
				tabBar.forEach(item => {
					uni.setTabBarItem({
						index: index,
						text: item.text,
						iconPath: item.iconPath,
						pagePath: item.pagePath,
						selectedIconPath: item.selectedIconPath,
						success: (res) => {
							console.log(res)
						},
						complete: (e) => {
							console.log(e)
						},
					})
					index++;
				})
				uni.setStorageSync('tabState', 0);

			},
		},

	}
</script>

<style lang="scss">
	/* #ifdef MP */
	.mp-search-box {
		position: absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;

		.ser-input {
			flex: 1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color: $font-color-base;
			border-radius: 20px;
			background: rgba(255, 255, 255, .6);
		}
	}

	page {}

  .menu{
    .cu-item{
      border-bottom: 1px solid #ddd;
    }
  }
	/* #endif */
	.cu-bar {
		min-height: 44px;

		.search-form {
			height: 65rpx;
			margin-right: 0;
			// margin-right: 0;
		}
	}

	.container {
		padding-top: 96px;

		.box {
			position: fixed !important;
			top: 0px;
			width: 100%;
			box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		}
	}

	.search-btn {
		background-color: #4CA5FE !important;
		color: #FFF;
		height: 65rpx;
	}

	.cate-btn {
		background-color: #4CA5FE !important;
		color: #FFF;
		margin: 0 10px;

		image {
			width: 16px;
			height: 16px;
		}
	}

	.navbar {
		display: flex;
		height: 44px;
		padding: 0 5px;
		background: #fff;
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			text-align: center;
			border-left: 0px;
			border-right: 0px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: #4CA5FE;
			}
		}

	}

	.bg-grey123 {
		border-radius: 20px;
	}

	.mb-sm123 {
		display: flex;
		border-bottom: 2px #5d9dd3 solid;
		border-top: 0px;
		border-left: 0px;
		border-right: 0px;
	}

	.cu-btns {
		margin: 0px 8px;
	}

	.cu-btnss {
		margin-right: -11px;
	}

	.boxbox {

		padding: 0px 0px;
		margin: 26px 10px;
	}

	.margin-xs123 {
		display: flex;
		margin: 0;
	}

	.margin-lr {}

	.container {
		padding-top: 45px;
	}

	.flex-wrap {
		color: #222 !important;
	}

	.person {
		.basis-xs {
			flex-basis: 50%;
			padding: 10px 0;
		}
	}

	.basis-xs {
		flex-basis: 50%;
		padding: 10px 0;
	}

	.basis-xs20 {
		flex-basis: 20%;
	}

	.basis-row {
		flex-basis: 100%;
	}

	.search-btn {
		background-color: #4CA5FE !important;
		color: #FFF;
		width: 80px;
	}

	.flex {
		margin: 0 15px;
		color: #BAC2D2;
		font-size: 12px;
	}

	.flex-2 {
		flex: 2
	}

	.box {
		position: fixed;
		top: 0px;
		left: 0;
		z-index: 990;
		width: 100%;
	}

	.list-scroll-content {
		margin-top: 45px;
		height: 600px;

		.item {
			heigth: 150px !important;
		}

		.title {
			font-size: 16px;
			color: #222222;
			font-weight: bold;
		}

		.reward {
			font-size: 20px;
			// color:#FF4400;
			// font-weight: bold;
			top: 5px;
			right: 5px;
			text-align: right;
		}

		.detail {
			font-size: 12px;
			color: #BAC2D2;
			// height:50px;
		}
	}

	.top0 {
		top: 0;
	}

	page {
		background: #f5f5f5;
	}

	.m-t {
		margin-top: 16upx;
	}


	.position {
		color: #222;
		font-size: 16px;
		margin: 0 !important;
		font-weight: bold;
		justify-content: space-between;
	}

	.item>.flex .subText {
		margin: 0 10px;
		height: 50px;
		border-bottom: 1px solid #4CA5FE;

	}

	.portrait-box {
		position: absolute;
		right: 20px;
	}

	.portrait {
		width: 130upx;
		height: 130upx;
		border: 5upx solid #fff;
		border-radius: 50%;
	}

	.flex {
		margin: 0 10px;
		color: #222;
	}

	.reward {
		// color: #FF4400;
		font-size: 18px;
		position: relative;
		min-width: 100px
	}

	.action-btn {
		height: 50px;
		padding: 5px 0;
	}

	.line {
		margin-top: 5px;
		border-top: 1px solid #4CA5FE;
	}

	.cu-avatar {
		width: 50upx;
		height: 50upx;
	}

	.company {
		font-size: 16px;
		height: 40px;
		line-height: 40px;
	}

	.height-14 {
		line-height: 14px;
	}

	.action-box {
		text-align: right;
	}

	.join-btn {
		width: 90px;
		font-size: 14px;
		height: 30px;
		border-radius: 17px;
		position: absolute;
		margin: 5px 0px;
		right: 25px;
		background-color: #0181ff;
	}

	.font14 {
		color: #BAC2D2;
		font-size: 14px;
		font-weight: normal;
	}
</style>
